<template>
  <div class="cesium-viewer">
    <div class="viewer-header">
      <h3>三维场景态势</h3>
      <div class="viewer-controls">
        <el-button-group size="small">
          <el-button :type="viewMode === '3d' ? 'primary' : 'default'" @click="setViewMode('3d')">
            3D视图
          </el-button>
          <el-button :type="viewMode === '2d' ? 'primary' : 'default'" @click="setViewMode('2d')">
            2D视图
          </el-button>
        </el-button-group>
        <el-button type="success" size="small" @click="toggleAnimation">
          {{ isAnimating ? '暂停' : '播放' }}
        </el-button>
      </div>
    </div>

    <div class="viewer-content">
      <!-- Cesium容器 -->
      <div ref="cesiumContainer" class="cesium-container">
        <!-- 模拟的3D场景，实际项目中这里会初始化Cesium -->
        <div class="scene-simulation">
          <div class="scene-background"></div>
          
          <!-- 地球模拟 -->
          <div class="earth-simulation" :class="{ rotating: isAnimating }">
            <div class="continent north-america"></div>
            <div class="continent europe"></div>
            <div class="continent asia"></div>
            <div class="continent africa"></div>
          </div>

          <!-- 卫星轨道 -->
          <div class="satellite-orbit orbit-1" :class="{ active: isAnimating }">
            <div class="satellite sat-1"></div>
          </div>
          <div class="satellite-orbit orbit-2" :class="{ active: isAnimating }">
            <div class="satellite sat-2"></div>
          </div>

          <!-- 信号覆盖区域 -->
          <div class="signal-coverage" v-if="showSignalCoverage">
            <div class="coverage-area area-1"></div>
            <div class="coverage-area area-2"></div>
            <div class="coverage-area area-3"></div>
          </div>

          <!-- 数据流动效果 -->
          <div class="data-flow" v-if="isAnimating">
            <div class="flow-line line-1"></div>
            <div class="flow-line line-2"></div>
            <div class="flow-line line-3"></div>
          </div>
        </div>
        
        <!-- 覆盖图层说明 -->
        <div class="layer-legend">
          <div class="legend-item">
            <div class="legend-color" style="background: #ff6b6b;"></div>
            <span>雷达覆盖</span>
          </div>
          <div class="legend-item">
            <div class="legend-color" style="background: #4ecdc4;"></div>
            <span>通信链路</span>
          </div>
          <div class="legend-item">
            <div class="legend-color" style="background: #45b7d1;"></div>
            <span>数据节点</span>
          </div>
        </div>
      </div>

      <!-- 场景信息面板 -->
      <div class="info-panel">
        <div class="panel-section">
          <div class="section-title">当前场景</div>
          <div class="info-item">
            <span class="info-label">场景名称:</span>
            <span class="info-value">多平台协同侦察</span>
          </div>
          <div class="info-item">
            <span class="info-label">时间进度:</span>
            <span class="info-value">{{ currentTime }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">活跃节点:</span>
            <span class="info-value">{{ activeNodes }}</span>
          </div>
        </div>

        <div class="panel-section">
          <div class="section-title">平台状态</div>
          <div class="platform-list">
            <div class="platform-item" v-for="platform in platforms" :key="platform.id">
              <div class="platform-icon" :class="platform.type"></div>
              <div class="platform-info">
                <div class="platform-name">{{ platform.name }}</div>
                <div class="platform-status" :class="platform.status">
                  {{ getStatusText(platform.status) }}
                </div>
              </div>
              <div class="platform-signal">
                <div class="signal-strength" :style="{ width: platform.signal + '%' }"></div>
              </div>
            </div>
          </div>
        </div>

        <div class="panel-section">
          <div class="section-title">数据统计</div>
          <div class="stats-grid">
            <div class="stat-item">
              <div class="stat-value">{{ totalDataPoints.toLocaleString() }}</div>
              <div class="stat-label">数据点</div>
            </div>
            <div class="stat-item">
              <div class="stat-value">{{ processedSamples.toLocaleString() }}</div>
              <div class="stat-label">已处理样本</div>
            </div>
            <div class="stat-item">
              <div class="stat-value">{{ detectedTargets }}</div>
              <div class="stat-label">检测目标</div>
            </div>
            <div class="stat-item">
              <div class="stat-value">{{ dataRate.toFixed(1) }} MB/s</div>
              <div class="stat-label">数据速率</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

// 响应式数据
const viewMode = ref('3d')
const isAnimating = ref(false)
const showSignalCoverage = ref(true)
const currentTime = ref('00:00:00')
const activeNodes = ref(8)
const totalDataPoints = ref(1547892)
const processedSamples = ref(892456)
const detectedTargets = ref(23)
const dataRate = ref(45.6)

// 平台数据
const platforms = ref([
  {
    id: 1,
    name: '预警机-01',
    type: 'radar',
    status: 'active',
    signal: 85
  },
  {
    id: 2,
    name: '侦察卫星-A',
    type: 'satellite',
    status: 'active',
    signal: 92
  },
  {
    id: 3,
    name: '电子战飞机',
    type: 'aircraft',
    status: 'warning',
    signal: 67
  },
  {
    id: 4,
    name: '地面站-北京',
    type: 'ground',
    status: 'active',
    signal: 78
  }
])

// Cesium容器引用
const cesiumContainer = ref(null)

// 定时器
let timeTimer = null
let dataTimer = null

// 设置视图模式
const setViewMode = (mode) => {
  viewMode.value = mode
  // 在实际Cesium应用中，这里会切换2D/3D视图
}

// 切换动画
const toggleAnimation = () => {
  isAnimating.value = !isAnimating.value
}

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    active: '正常',
    warning: '告警',
    error: '故障',
    offline: '离线'
  }
  return statusMap[status] || '未知'
}

// 更新时间
const updateTime = () => {
  const now = new Date()
  const hours = String(now.getHours()).padStart(2, '0')
  const minutes = String(now.getMinutes()).padStart(2, '0')
  const seconds = String(now.getSeconds()).padStart(2, '0')
  currentTime.value = `${hours}:${minutes}:${seconds}`
}

// 更新数据
const updateData = () => {
  // 模拟数据更新
  totalDataPoints.value += Math.floor(Math.random() * 1000)
  processedSamples.value += Math.floor(Math.random() * 500)
  detectedTargets.value = Math.max(0, detectedTargets.value + Math.floor(Math.random() * 3) - 1)
  dataRate.value = Math.max(0, dataRate.value + (Math.random() - 0.5) * 10)
  
  // 更新平台信号强度
  platforms.value.forEach(platform => {
    platform.signal = Math.max(0, Math.min(100, platform.signal + (Math.random() - 0.5) * 10))
  })
}

onMounted(() => {
  // 启动时间更新
  timeTimer = setInterval(updateTime, 1000)
  updateTime()
  
  // 启动数据更新
  dataTimer = setInterval(updateData, 3000)
  
  // 在实际项目中，这里会初始化Cesium
  // initCesiumViewer()
})

onUnmounted(() => {
  if (timeTimer) clearInterval(timeTimer)
  if (dataTimer) clearInterval(dataTimer)
  
  // 在实际项目中，这里会销毁Cesium实例
  // destroyCesiumViewer()
})
</script>

<style scoped>
.cesium-viewer {
  height: 49vh;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 1vh;
  padding: 1.5vh 1.5vw;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 245, 255, 0.3);
  display: flex;
  flex-direction: column;
}

.viewer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1vh;
  padding-bottom: 1vh;
  border-bottom: 1px solid rgba(0, 245, 255, 0.3);
}

.viewer-header h3 {
  color: #00f5ff;
  font-size: 1.4vw;
  margin: 0;
  text-shadow: 0 0 10px rgba(0, 245, 255, 0.5);
}

.viewer-controls {
  display: flex;
  gap: 1vw;
  align-items: center;
}

.viewer-content {
  flex: 1;
  display: flex;
  gap: 1vw;
}

.cesium-container {
  width: 65%;
  position: relative;
  background: #000011;
  border-radius: 0.5vh;
  border: 1px solid rgba(0, 245, 255, 0.3);
  overflow: hidden;
}

.scene-simulation {
  width: 100%;
  height: 100%;
  position: relative;
  background: radial-gradient(circle at center, #001122, #000000);
}

.scene-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(2px 2px at 20px 30px, #eee, transparent),
    radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 90px 40px, #fff, transparent),
    radial-gradient(1px 1px at 130px 80px, #fff, transparent),
    radial-gradient(2px 2px at 160px 30px, #ddd, transparent);
  background-repeat: repeat;
  background-size: 200px 100px;
  opacity: 0.3;
}

.earth-simulation {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 15vh;
  height: 15vh;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #4a90e2, #2c5282);
  border: 2px solid rgba(0, 245, 255, 0.5);
  box-shadow: 
    0 0 20px rgba(0, 245, 255, 0.3),
    inset 0 0 20px rgba(0, 0, 0, 0.3);
}

.earth-simulation.rotating {
  animation: rotate 20s linear infinite;
}

.continent {
  position: absolute;
  background: rgba(0, 255, 0, 0.3);
  border-radius: 50%;
}

.north-america {
  top: 20%;
  left: 15%;
  width: 25%;
  height: 35%;
}

.europe {
  top: 25%;
  left: 45%;
  width: 15%;
  height: 20%;
}

.asia {
  top: 20%;
  left: 55%;
  width: 30%;
  height: 40%;
}

.africa {
  top: 45%;
  left: 40%;
  width: 20%;
  height: 30%;
}

.satellite-orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px solid rgba(0, 245, 255, 0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.orbit-1 {
  width: 25vh;
  height: 25vh;
}

.orbit-2 {
  width: 35vh;
  height: 35vh;
  animation-delay: -10s;
}

.satellite-orbit.active {
  animation: pulse 2s ease-in-out infinite;
}

.satellite {
  position: absolute;
  width: 6px;
  height: 6px;
  background: #ff6b6b;
  border-radius: 50%;
  box-shadow: 0 0 10px #ff6b6b;
}

.sat-1 {
  top: -3px;
  left: 50%;
  animation: orbit 15s linear infinite;
}

.sat-2 {
  top: -3px;
  left: 50%;
  animation: orbit 25s linear infinite reverse;
}

.signal-coverage {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.coverage-area {
  position: absolute;
  border-radius: 50%;
  opacity: 0.2;
  animation: pulse 3s ease-in-out infinite;
}

.area-1 {
  top: 20%;
  left: 30%;
  width: 8vh;
  height: 8vh;
  background: radial-gradient(circle, #ff6b6b, transparent);
}

.area-2 {
  top: 60%;
  left: 20%;
  width: 6vh;
  height: 6vh;
  background: radial-gradient(circle, #4ecdc4, transparent);
  animation-delay: -1s;
}

.area-3 {
  top: 40%;
  right: 25%;
  width: 7vh;
  height: 7vh;
  background: radial-gradient(circle, #45b7d1, transparent);
  animation-delay: -2s;
}

.data-flow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.flow-line {
  position: absolute;
  height: 2px;
  background: linear-gradient(90deg, transparent, #00f5ff, transparent);
  opacity: 0;
  animation: flow 2s ease-in-out infinite;
}

.line-1 {
  top: 30%;
  left: 20%;
  width: 60%;
  transform: rotate(45deg);
}

.line-2 {
  top: 60%;
  left: 10%;
  width: 50%;
  transform: rotate(-30deg);
  animation-delay: -0.7s;
}

.line-3 {
  top: 45%;
  right: 15%;
  width: 40%;
  transform: rotate(60deg);
  animation-delay: -1.4s;
}

.layer-legend {
  position: absolute;
  top: 1vh;
  right: 1vw;
  background: rgba(0, 0, 0, 0.7);
  padding: 1vh 1vw;
  border-radius: 0.5vh;
  border: 1px solid rgba(0, 245, 255, 0.3);
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 0.5vw;
  margin-bottom: 0.5vh;
  color: #ffffff;
  font-size: 0.8vw;
}

.legend-color {
  width: 1vw;
  height: 1vh;
  border-radius: 50%;
}

.info-panel {
  width: 33%;
  display: flex;
  flex-direction: column;
  gap: 1vh;
}

.panel-section {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 0.5vh;
  padding: 1vh 1vw;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.section-title {
  color: #ffffff;
  font-size: 1vw;
  font-weight: bold;
  margin-bottom: 1vh;
  text-align: center;
  border-bottom: 1px solid rgba(0, 245, 255, 0.3);
  padding-bottom: 0.5vh;
}

.info-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5vh;
}

.info-label {
  color: #cccccc;
  font-size: 0.8vw;
}

.info-value {
  color: #00ff00;
  font-size: 0.8vw;
  font-weight: bold;
}

.platform-list {
  display: flex;
  flex-direction: column;
  gap: 0.8vh;
}

.platform-item {
  display: flex;
  align-items: center;
  gap: 0.8vw;
  padding: 0.5vh 0.8vw;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 0.3vh;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.platform-icon {
  width: 1.5vw;
  height: 1.5vw;
  border-radius: 50%;
}

.platform-icon.radar { background: #ff6b6b; }
.platform-icon.satellite { background: #4ecdc4; }
.platform-icon.aircraft { background: #45b7d1; }
.platform-icon.ground { background: #96ceb4; }

.platform-info {
  flex: 1;
}

.platform-name {
  color: #ffffff;
  font-size: 0.8vw;
  font-weight: bold;
}

.platform-status {
  font-size: 0.7vw;
}

.platform-status.active { color: #00ff00; }
.platform-status.warning { color: #ffaa00; }
.platform-status.error { color: #ff4444; }

.platform-signal {
  width: 3vw;
  height: 0.5vh;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 0.25vh;
  overflow: hidden;
}

.signal-strength {
  height: 100%;
  background: linear-gradient(90deg, #ff4444, #ffaa00, #00ff00);
  transition: width 0.3s ease;
}

.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8vh;
}

.stat-item {
  text-align: center;
  padding: 0.8vh;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 0.3vh;
  border: 1px solid rgba(0, 245, 255, 0.2);
}

.stat-value {
  color: #00f5ff;
  font-size: 1vw;
  font-weight: bold;
  display: block;
  margin-bottom: 0.3vh;
}

.stat-label {
  color: #cccccc;
  font-size: 0.7vw;
}

/* 动画 */
@keyframes rotate {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes orbit {
  from { transform: rotate(0deg) translateX(12.5vh) rotate(0deg); }
  to { transform: rotate(360deg) translateX(12.5vh) rotate(-360deg); }
}

@keyframes pulse {
  0%, 100% { opacity: 0.2; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.1); }
}

@keyframes flow {
  0% { opacity: 0; transform: translateX(-100%); }
  50% { opacity: 1; }
  100% { opacity: 0; transform: translateX(100%); }
}

:deep(.el-button-group .el-button) {
  font-size: 0.8vw;
  padding: 0.5vh 1vw;
}
</style>